<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>速用科技</title>
<meta name="keywords" content="速用科技管理系统">
<meta name="description" content="速用科技管理系统">
<!-- Favicon -->
<link rel="icon" href="/img/favicon.png">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/login.css" rel="stylesheet">
<link rel="stylesheet" href="css/style1.css">
<!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
<script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }//这段代码可以防止自己的网页被别人用iframe的方式嵌入到其它网页中去 
        
        
     
</script>
<style>

/*消除google浏览器黄色框 */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus
	{
	box-shadow: 0 0 0 60px #eee inset;
	-webkit-text-fill-color: #878787;
}

.tab-content {
	clear: left;
	display: none;
}

p {
	border-bottom: solid #02aaf1 2px;
	width: 180px;
	height: 25px;
	margin: 0;
	float: left;
	text-align: center;
	font-size: 16px;
}

.selected {
	color: #FFFFFF;
	background-color: #02aaf1;
}

.show {
	clear: left;
	display: block;
}
</style>

</head>

<body class="signin">
	<div class="signinpanel">
		<div class="row">
			<div class="col-sm-7">
				<div class="signin-info">
					<div class="logopanel m-b">
						<h1>速用科技</h1>
					</div>
					<div class="m-b"></div>
					<h3>
						欢迎使用 <strong>速用科技管理系统</strong>
					</h3>
					<ul class="m-b">
						<li><i class="fa fa-arrow-circle-o-right m-r-xs"> 专业的技术团队</i>

						</li>
						<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>长期技术支持以提供稳定服务</li>
						<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>开发私有定制小程序</li>
						<li><i class="fa fa-arrow-circle-o-right m-r-xs"> 售后服务</i></li>
						<li><i class="fa fa-arrow-circle-o-right m-r-xs">
								为了无法估量的价值</i></li>
					</ul>
				</div>
			</div>
			<div class="col-sm-5">
				<p id="tab1" class="selected" name="tab">账号登录</p>
				<p id="tab2" name="tab">短信登录</p>
				<!--第一个开始  -->
				<div id="body1" class="show" name="divcontent">
					<form id="signupForm">
						<input type="text" name="phone" class="form-control uname"
							value="" /> <input type="password" name="password"
							class="form-control pword m-b" value="" />
							<input  type="checkbox" name="rememberme" />&nbsp;&nbsp;记住我
						 
				<a id="login" class="btn btn-login btn-block">账号登录</a>
					  		
						<!--按钮模块-->
						<div class="outside-login">
							<div class="outside-login-tit"></div>
							<div class="outside-login-cot">
								<a
									class="outside-login-btn wxoa actived my J-btnSwitchLoginType"
									target="_Blank" href="https://www.suyongw.com/"> <em><i
										class="fa fa-commenting-o"></i></em> <span>官网链接</span>
								</a> <a
									class="outside-login-btn wxoa actived my J-btnSwitchLoginType"
									href="/register"> <em><i class="fa fa-registered"></i></em>
									<span>快速注册</span>
								</a> <a
									class="outside-login-btn wxoa actived git J-btnSwitchLoginType"
									href="/forget"> <em><i class="fa fa-search"></i></em> <span>忘记密码</span>
								</a>
							</div>
						</div>
					</form>
				</div>
				<!--第一个结束  -->

				<!--第二个开始  -->
				<div id="body2" class="tab-content" name="divcontent">
					<form id="suduForm">
						<input type="text" name="smsphone" id="smsphone"
							class="form-control uname" value="" />


						<div class="row">

							<div class="col-xs-6 pull_left">

								<input class="form-control" id="sms_num" name="sms_num"
									style="color: black;" placeholder="请输入验证码">

							</div>

							<div class="col-xs-6 pull_center">

								<input type="button" class="btn btn-block btn-flat"
									id="verify_refreshSMS" value="免费获取验证码"
									onclick="getMsgSms(this)">

							</div>

						</div>

						<button class="btn btn-login btn-block" type="submit"
							onclick="smslogin(this)">短信登录</button>

						<!--按钮模块-->
						<div class="outside-login">
							<div class="outside-login-tit"></div>
							<div class="outside-login-cot">
								<a
									class="outside-login-btn wxoa actived my J-btnSwitchLoginType"
									target="_Blank" href="http://www.suyongw.com"> <em><i
										class="fa fa-commenting-o"></i></em> <span>官网链接</span>
								</a> <a
									class="outside-login-btn wxoa actived my J-btnSwitchLoginType"
									href="/register"> <em><i class="fa fa-registered"></i></em>
									<span>快速注册</span>
								</a> <a
									class="outside-login-btn wxoa actived git J-btnSwitchLoginType"
									href="/forget"> <em><i class="fa fa-search"></i></em> <span>忘记密码</span>
								</a>
							</div>
						</div>
					</form>
				</div>
				<!--第二个结束  -->

			</div>
		</div>
		<div class="signup-footer">
			<div class="pull-left">&copy; 2018 All Rights Reserved.速用科技</div>

		</div>
	</div>

	<script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
	<!-- 全局js -->
	<script src="/js/jquery.min.js?v=2.1.4"
		th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
	<script src="/js/bootstrap.min.js?v=3.3.6"
		th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>

	<!-- 自定义js -->
	<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>

	<!-- jQuery Validation plugin javascript-->
	<script src="/js/ajax-util.js"></script>
	<script src="/js/plugins/validate/jquery.validate.min.js"
		th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
	<script src="/js/plugins/validate/messages_zh.min.js"
		th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
	<script src="/js/plugins/layer/layer.min.js"
		th:src="@{/js/plugins/layer/layer.min.js}"></script>


<script type="text/javascript">
	$('body').keydown(function(e){
		if(e.keyCode==13){
		   login();
		}
	});
	
    var tabs = document.getElementsByName('tab');

 	var contents = document.getElementsByName('divcontent');

 	

 	(function changeTab(tab) {

 	    for(var i = 0, len = tabs.length; i < len; i++) {

 	        tabs[i].onmouseover = showTab;

 	    }

 	})();

 	

 	function showTab() {

 	    for(var i = 0, len = tabs.length; i < len; i++) {

 	        if(tabs[i] === this) {

 	            tabs[i].className = 'selected';

 	            contents[i].className = 'show';

 	        } else {

 	            tabs[i].className = '';

 	            contents[i].className = 'tab-content';

 	        }

 	    }

 	}

	
	
    $(document).ready(function () {
		 $("#login").on('click',function(){$("#signupForm").submit();});
	     validateRule();
	    });


    function login() {
        $.ajax({
            type: "POST",
            url: ctx+"login",
            data: $('#signupForm').serialize(),
            success: function (r) {
                 if (r.code == 0) {
                    var index = layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    
                    setTimeout(function(){
                    	  parent.location.href = '/index';
                    },0);
                  
                } else {
                    layer.msg(r.msg);
                }
            },
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                phone: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
            	phone: {
                    required: icon + "请输入您的手机号码",
                },
                password: {
                    required: icon + "请输入您的密码",
                }
            },
            
            submitHandler: function () {
                login();
            }
        })
    }
    
    
    
    /*短信登录JS开始 */

	function getMsgSms(that) {

		var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;

		var phone = $('#smsphone').val();

		if (phone == null || phone == "") {

			layer.msg("手机号码不能为空");

			return;

		}

		if (!myreg.test(phone)) {

			layer.msg("请输入正确的手机号码");

			return;

		}

		$.ajax({

			type : "POST",

			url : ctx + "sendMsg",

			data : {

				'phone' : phone

			},

			success : function(r) {


				if (r.code == 500) {

					layer.msg(r.msg);

					return;

				} else {

					setButtonStatus(that);

					layer.msg(r.msg);

				}


			},

		});

	}

    
    
	function smslogin() {

		jQuery.validator

				.addMethod(

						"isphone",

						function(value, element) {

							var length = value.length;

							var phone = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;

							return this.optional(element)

									|| (length == 11 && phone.test(value));

						}, "请正确填写您的手机号码");

		$("#suduForm").validate({

			rules : {

				smsphone : {

					required : true,

					isphone : true

				},

				sms_num : {

					required : true,

				}


			},

			messages : {

				smsphone : {

					required : "请输入手机号码",

					isphone : "请输入要正确的手机号码"

				},

				sms_num : {

					required : "验证码不能为空",

				}

			},


			submitHandler : function() {

				

				$.ajax({

					type : "POST",

					url : ctx + "login",

					data : $('#suduForm').serialize(),

					success : function(r) {

						if (r.code == 0) {

							layer.msg(r.msg);

							parent.location.href = '/index';

						} else {

							layer.msg(r.msg);

						}


					}

				})


			}


		})

	}

	

// 设置按钮状态开始

    var wait = 120;

	function setButtonStatus(that) {

		if (wait == 0) {

			that.removeAttribute("disabled");

			that.value = "免费获取验证码";

			wait = 60;

		} else {

			that.setAttribute("disabled", true);

			that.value = wait + "秒后重新发送";

			wait--;

			setTimeout(function() {

				setButtonStatus(that)

			}, 1000)

		}

	}

/*短信登录JS结束 */	

</script>

</body>
</html>
